<template>
  <div class="pay-list-wrap">
    <van-popup v-model="isShow" position="bottom" @closed="closePopup">
      <div class="dialog-header">
        <div class="dialog-title">请选择支付方式</div>
        <div class="close-wrap" @click="closePopup">
          <i class="icon-close"></i>
        </div>
      </div>
      <ul class="pay-list">
        <li
          v-for="(v, index) in list"
          :key="index"
          @click="handleSelect(index)"
        >
          <div class="pay-info-des">
            <img
              class="icon-pay-method"
              :src="
                require(`../../../assets/images/activity/icon-${v.icon}.png`)
              "
            />
            <p>
              <span class="pay-name">{{ v.name }}</span
              ><br />
              <span class="pay-tip">账户余额不足</span>
            </p>
          </div>
          <div
            class="select-status unselect"
            :class="{ selected: selectedId === index }"
          ></div>
        </li>
      </ul>
      <div class="btn-wrap">
        <div class="btn" @click="handleSure">
          {{ payName }} ￥{{ payMoney }}
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 订单支付失败
export default {
  name: 'payList',
  props: {
    payMethodList: {
      type: Array,
      default: () => []
    },
    payMoney: {
      type: [String, Number],
      default: '98.00'
    }
  },
  computed: {
    payName() {
      return this.list[this.selectedId].name;
    }
  },
  data() {
    return {
      isShow: false,
      selectedId: 0,
      list: [
        {
          id: 1,
          isCanSelect: false,
          icon: 'balance',
          name: '余额支付'
        },
        {
          id: 2,
          isCanSelect: false,
          icon: 'bounty',
          name: '奖励金抵扣'
        },
        {
          id: 3,
          isCanSelect: true,
          icon: 'alipay',
          name: '支付宝支付'
        },
        {
          id: 4,
          isCanSelect: true,
          icon: 'wechat',
          name: '微信支付'
        }
      ]
    };
  },
  methods: {
    showPopup() {
      this.isShow = true;
    },
    closePopup() {
      this.isShow = false;
    },
    handleSelect(index) {
      this.selectedId = index;
    },
    handleSure() {}
  }
};
</script>

<style lang="scss" scoped>
.pay-list-wrap {
  .dialog-header {
    background-color: #fff;
    height: 48px;
    position: relative;
    .dialog-title {
      height: 100%;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .close-wrap {
      position: absolute;
      top: 0;
      right: 0;
      padding: 16px;

      .icon-close {
        width: 16px;
        height: 16px;
        display: block;
        background: url('../../../assets/images/activity/icon-close.png')
          no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .pay-list {
    background-color: #fff;
    padding: 0 16px;
    li {
      display: flex;
      align-items: center;
      padding: 14px 0 11px;
      border-bottom: 1px solid #f0f0f0;
    }
    .pay-info-des {
      display: flex;
      font-size: 0;
      align-items: center;
      flex: 1;
    }
    .icon-pay-method {
      width: 28px;
      height: 28px;
      margin-right: 8px;
      display: block;
    }
    .pay-name {
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #333;
      line-height: 20px;
    }
    .pay-tip {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #999;
      line-height: 17px;
    }

    .select-status {
      width: 20px;
      height: 20px;

      &.unselect {
        background: url('../../../assets/images/activity/icon-unselect.png');
        background-size: 100% 100%;
      }
      &.selected {
        background: url('../../../assets/images/activity/icon-selected.png');
        background-size: 100% 100%;
      }
      &.unclick {
        background: url('../../../assets/images/activity/icon-dis-select.png');
        background-size: 100% 100%;
      }
    }
  }
  .btn-wrap {
    height: 76px;
    background: #fff;
    display: flex;
    align-items: center;

    .btn {
      width: 360px;
      height: 44px;
      margin: 0 auto;
      background: linear-gradient(
        90deg,
        rgba(255, 88, 94, 1) 0%,
        rgba(255, 48, 55, 1) 100%
      );
      border-radius: 22px;
      font-size: 18px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
  }
}
.van-popup {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
}
</style>
